<template>
  <div class="contextmenu" id="contextmenu" v-show="isShow" :style="{...position, ...positionCompensate}">
    <div
      @mousedown="event => handleClick(item.onClick, event, item.disabled)"
      @mouseup="handleMouseUp"
      data-type="contextmenu"
      v-for="item in list"
      :key="item.type"
      class="item"
      :class="item.disabled() ? 'disabled' : ''">
      <a-icon :type="item.icon" class="icon" />
      {{ item.name }}
    </div>

  </div>
</template>

<script >
import { mapState } from 'vuex'
import { getAllAnalysisComponentTypes } from '../../../lib/analysisData'
import getButnList from "../../../ToolBar/buttonList"
import { $ } from "../../../lib/utils"

export default {
  data() {
    return {
      // list: getButnList(["topping", "setAtEnd", "delete", "copy", "paste", "cancel"]),
    }
  },
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    position: {
      type: Object,
      default: () => {}
    },
    type: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: "component" | "map",
      default: "component"
    }

  },
  computed: {
    ...mapState("lowCode", {
      selectedComponent: state => state.selectedComponent,
      multipleKeys: state => state.multipleKeys
    }),
    list(){
      const componentBase = ["topping", "setAtEnd", "delete", "copy", "shear", "paste"]
      const map = ["paste"]
      const baseEnd = ["cancel"]
      let list = []

      if (this.type === 'component'){
        list = [
          ...list,
          ...componentBase
        ]
        if (this.multipleKeys.length > 0){ //  this.type === "component"
          const types = getAllAnalysisComponentTypes()
          // 如果是业务组件
          if (types.includes(this.selectedComponent.type)){
            list = [
              ...list,
              "editAnalysis",
              "dataDetails",

            ]
          }
        }
      }



      else {
        list = [
          ...list,
          ...map
        ]
      }
      list = [
        ...list,
        ...baseEnd
      ]
      return getButnList([...list], true)
    },
    /**
     * 位置补偿,如果菜单超出边界,则通过margin补偿position
     */
    positionCompensate(){
      const {
        clientX,
        clientY
      } = this.position
      const height = this.list.length * 36
      const width = 96
      const {
        clientWidth,
        clientHeight
      } = document.body
      const margin = {}
      // left和top方向不可能超出

      // right方向超出
      if (clientWidth - clientX < width){
        margin.marginLeft = `-${width}px`
      }
      // bottom方向超出
      else if (clientHeight - clientY < height){
        margin.marginTop = `-${height}px`
      }
      else {
        margin.marginLeft = 0
        margin.marginTop = 0
      }
      return {
        ...margin
      }
    }
  },
  methods: {
    handleContextmenu(event){
      // if(event.button === 2){

      // }
    },
     handleClick(callback, event, disabled){
      event.preventDefault()
      event.stopPropagation()
      if (disabled()){ return false }
      callback(this)
    },
    handleMouseUp(event){
      event.preventDefault()
      event.stopPropagation()
    },


  }

}
</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>

